import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import LazyImage from '@/components/LazyImage'
import css from './index.module.scss'
import Upzhu from '@/assets/images/upzhu.png'
import Enterprise from '@/assets/images/enterprise.png'
export default class Avatar extends PureComponent {
    static propTypes = {
        src: PropTypes.string.isRequired,
        round: PropTypes.bool,
        size: PropTypes.string,
        // vip类型id
        vip: PropTypes.number,
        // 官方认证信息
        official: PropTypes.object,
        // 自定义样式
        style: PropTypes.object,
        onClick: PropTypes.func        
    }

    static defaultProps = {
        size: 'small',
        round: true,
        // 大于0为会员
        vip: -1,
        // 默认官方认证信息
        official: {
            desc: '',
            type: -1
        }
    }
    
    state = {
        sizes: ['small', 'large']
    }

    handleClick = () => {
        typeof this.props.onClick === 'function' && this.props.onClick()
    }

    renderOther = () => {
        const { official: { type }, vip } = this.props
        // 是否为大会员
        const isVip = vip > 0
        // up主认证
        const isUpzhu = type === 0
        // 企业认证
        const isEnterprise = type === 1

        const isVertify = type > -1

        if (isVertify & isUpzhu) {
            return (<img className="icon" src={Upzhu} alt="up主认证" />)
        } else if(isVertify & isEnterprise) {
            return (<img className="icon" src={Enterprise} alt="企业认证" />)
        } else if(isVip) {
            return (<i className="fa fa-vip"></i>)
        } else {
            return null
        }
    }

    render() {                
        const { src, size, round, className, style } = this.props
        const { sizes } = this.state
        const matchClass = sizes.find(item => item === size)
        const classes = ['wrap']
        if (round) {
            classes.push('wrap-round')
        }
        if (matchClass) {
            classes.push(`wrap-${matchClass}`)
        }
        return (
            <div className={`${classes.map(item => css[item]).join(' ')} ${className ? className : ''} `} style={style} onClick={this.handleClick}>                
                <LazyImage className="img" src={src} alt="头像" webp={false} />
                { this.renderOther() }                
            </div>
        )
    }
}
